<template>
    <div class="box-card box-minheight">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">
            <el-tabs tab-position="top" class="demo-tabs" v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="电网参数" name="powerGrid">
                    <PowerGrid v-if="activeTab === 'powerGrid'"></PowerGrid>
                </el-tab-pane>
                <el-tab-pane label="发电机组" name="generatorSet">
                    <Generator v-if="activeTab === 'generatorSet'"></Generator>
                </el-tab-pane>
                <el-tab-pane label="负荷监测" name="load">
                    <Load v-if="activeTab === 'load'"></Load>
                </el-tab-pane>
                <el-tab-pane label="储能设备" name="storage">
                    <Storage v-if="activeTab === 'storage'"></Storage>
                </el-tab-pane>
                <el-tab-pane label="太阳能光伏" name="PV">太阳能光伏</el-tab-pane>
                <el-tab-pane label="风力发电" name="windPower">风力发电</el-tab-pane>
                <el-tab-pane label="逆变器监测" name="inverter">逆变器监测</el-tab-pane>
                <el-tab-pane label="电表" name="electricityMeter">电表</el-tab-pane>
                <!-- <el-tab-pane label="控制命令执行" name="c">控制命令执行</el-tab-pane> -->
            </el-tabs>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import PowerGrid from './powerGrid.vue'
import Generator from './generator.vue'
import Load from './load.vue'
import Storage from './storage.vue'

//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})
const activeTab = ref('powerGrid');

function handleTabClick(tab) {
    console.log('Tab clicked:', tab.props.name);
    activeTab.value = tab.props.name
}

</script>

<style scoped lang="scss">
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>